<template>
  <div class="app-container">
    <el-form ref="baseForm" label-width="120px">
      <el-form-item label="数据回溯名称">
        <el-input v-model="baseForm.dataBacktrackName" placeholder="请输入数据回溯名称" />
      </el-form-item>
      <el-card header="数据回溯步骤设置" style="margin-bottom: 22px;">
        <el-row :gutter="10" v-for="(item, index) in baseForm.stepList" :key="index">
          <el-col :span="10">
            <el-form-item :label="`第${index + 1}步`">
              <el-input v-model="item.stepName" placeholder="步骤名称" />
            </el-form-item>
            </el-col>
          <el-col :span="10">
            <el-form-item>
              <el-radio 
                v-model="item.listType" 
                v-for="(value, key) in listType" 
                :key="key"
                :label="key"
                @change="handleListType(item, index)">
                {{value}}</el-radio>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-button type="danger" size="mini" circle icon="el-icon-delete" title="删除" @click="handleRemoveStep(item, index)"></el-button>
          </el-col>
        </el-row>
        <el-row style="text-align: center; margin-bottom: 15px;">
          <el-button
            icon="el-icon-circle-plus-outline"
            type="text"
            @click="handleAddStep"
          >
            添加步骤
          </el-button>
        </el-row>
        <el-row style="text-align: center;">
          <el-button type="primary" @click="handleActive">确定激活</el-button>
        </el-row>
      </el-card>
      <el-card header="公共参数设置">
        <el-row :gutter="10" v-for="(item, index) in baseForm.commonPara" :key="index">
          <el-col :span="8">
            <el-form-item label="参数名称">
              <el-input v-model="item.name" placeholder="参数名称" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="参数名称定义">
              <el-input v-model="item.key" placeholder="参数名称定义" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-button type="danger" size="mini" circle icon="el-icon-delete" title="删除" @click="handleRemoveParam(item, index)"></el-button>
          </el-col>
        </el-row>
        <el-row style="text-align: center;">
          <el-button
            icon="el-icon-circle-plus-outline"
            type="text"
            @click="handleAddParam"
          >
            添加参数
          </el-button>
        </el-row>
      </el-card>
    </el-form>
  </div>
</template>

<script>
import enums from '@/views/workflow/utils/enum'
export default {
  props: {
    backtrack: {
      type: Object,
      default: {}
    }
  },
  components: {
    
  },
  data() {
    return {
      baseForm: {
        dataBacktrackName: '',
        commonPara: [],
        stepList: [],
        stepNum: 0
      }
    }
  },
  watch: {
    backtrack: {
      handler(n) {
        this.baseForm = JSON.parse(JSON.stringify(n))
      },
      deep: true
    },
    'baseForm.stepList': {
      handler(n) {
        this.baseForm.stepNum = n && n.length ? n.length : 0
      },
      deep: true
    }
  },
  computed: {
    listType() {
      return enums.LIST_TYPE
    },
  },
  created() {
    this.baseForm = JSON.parse(JSON.stringify(this.backtrack))
  },
  methods: {
    handleAddStep() {
      const item = { stepName: '', listType: []}
      this.baseForm.stepList.push(item)
    },
    handleRemoveStep(item, index) {
      this.baseForm.stepList.splice(index, 1)
    },
    handleListType(item, index) {
      if (item.listType === Object.keys(enums.LIST_TYPE)[0]) { // 流程列表
        item = {
          bodyPart: {
            paramList: [],
          },
          exceptionalPart: {},
          activatePart: {
            paramList: []
          },
          ...item,
        }
      } else if (item.listType === Object.keys(enums.LIST_TYPE)[1]) { // 数据列表
        item = {
          bodyPart: {
            querySql: '',
            tableSettingList: [],
          },
          exceptionalPart: {},
          activatePart: {
            paramList: []
          },
          ...item,
        }
      }
      this.baseForm.stepList[index] = item
    },
    handleAddParam() {
      const item = { name: '', key: ''}
      this.baseForm.commonPara.push(item)
    },
    handleRemoveParam(item, index) {
      this.baseForm.commonPara.splice(index, 1)
    },
    handleActive() {
      this.$emit('handleActive', this.baseForm)
    }
  }
}
</script>

<style scoped>

</style>
